<template>
    <div>
        <el-row>
            <el-col :span="4">
                <el-button type="primary" @click="tolist">
                    课程列表
                </el-button>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="tojiaoliu">
                    课程交流
                </el-button>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="topingjia">
                    课程评价
                </el-button>
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>课程简介</span>
                <el-input rows="5" show-word-limit maxlength="500" v-model="list.xjianjie" type="textarea" style="width: 600px;" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>适用人群</span>
                <el-input rows="5" show-word-limit maxlength="500" v-model="list.xrenqun" type="textarea" style="width: 600px;" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>学习收获</span>
                <el-input rows="5" show-word-limit maxlength="500" v-model="list.xshouhuo" type="textarea" style="width: 600px;" />
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col>
                <span>看前须知</span>
                <el-input rows="5" show-word-limit maxlength="500" v-model="list.xxuzhi" type="textarea" style="width: 600px;" />
            </el-col>
            <el-dialog v-model="show" :title="title">
                <ListView :key="id" :code="id" v-if="title=='查看课程列表'" @tuichu="listout"></ListView>
                <JiaoLiu :key="id" :code="id" v-if="title=='查看课程交流'" @tuichu="jiaoliuout"></JiaoLiu>
                <PingJia :key="id" :code="id" v-if="title=='查看课程评价'" @tuichu="pingjiaout"></PingJia>
            </el-dialog>
        </el-row>
        <el-row>
            <el-col :span="3" :offset="18">
                <el-button @click="quxiao">
                    取消
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="save">
                    保存
                </el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
    import { ref, defineEmits, defineProps, onMounted } from "vue";
    import axios from "axios";
    import ListView from "./ListView.vue";
    import JiaoLiu from "./JiaoLiu.vue";
    import PingJia from "./PingJia.vue";

    const props = defineProps({
        ids: {
            type: Number
        }
    });

    let id = ref(props.ids);
    let show = ref(false);
    let title = ref("");

    const tolist = function () {
        show.value = true;
        title.value = "查看课程列表";
    };

    const tojiaoliu = function () {
        show.value = true;
        title.value = "查看课程交流";
    };

    const topingjia = function () {
        show.value = true;
        title.value = "查看课程评价";
    };

    let list = ref({});
    const sou = async function () {
        let res = await axios.get(`/xiangqing/findid?xKid=${id.value}`);
        list.value = res.data.data;
    };

    const emites = defineEmits(["tuichu"]);

    const quxiao = function () {
        emites("tuichu");
    };

    const save = function () {
        emites("tuichu", {
            xId: list.value.xid,
            xJianjie: list.value.xjianjie,
            xRenqun: list.value.xrenqun,
            xShouhuo: list.value.xshouhuo,
            xXuzhi: list.value.xxuzhi
        });
    };

    const listout = function () {
        show.value = false;
    };

    const jiaoliuout = function () {
        show.value = false;
    };

    const pingjiaout = function () {
        show.value = false;
    };

    onMounted(async function () {
        sou();
    });
</script>

<style lang="less" scoped>
    .rows {
        margin: 30px 0;
        span {
            font-weight: bold;
            position: relative;
            left: -10px;
            top: 0;
        }
    }

    .weizhi {
        display: flex;
        justify-content: start;
        align-items: center;
        position: relative;
        left: 7px;
    }
</style>